<template lang="jade">
  div.full_page
    div.left_panel 
        div.vertical_middle Program 定制
        
    div.right_panel
        div.weui_panel.title
            p.weui_panel_hd 当前共有{{programs.length}}个定制Program
        div.weui_panel.bd.spacing.button.menu_list
            router-link.weui_cell(to="/create")
                div.weui_btn.weui_btn_primary.menuitem
                    i.fa.fa-plus
            router-link.weui_cell(v-bind:to="'/edit/' + item.id", v-for="(item, index) in programs", v-bind:key="index")
                div.weui_btn.weui_btn_primary.menuitem {{item.name}}
</template>
<script>

import {mapGetters, mapActions, mapMutations, mapState} from 'vuex'

export default {
  methods: {
      ...mapActions(['loadProgramList']),
      ...mapMutations(['UPDATE']),
      async initData () {
        let programList = await this.loadProgramList();
        this.$store.commit('UPDATE', {
            key: 'programs',
            value: programList
        })
        this.clearData();
      },

      clearData () {
        this.$store.commit('UPDATE', {
            key: 'program',
            value: {
                id: null,
                name: '',
                description: '',
                workouts: []
            }
        });

        this.$store.commit('UPDATE', {
            key: 'baseProgramId',
            value: null
        });
      }
  },
  computed: {
      ...mapState(['programs'])
  },
  props: [],
  watch: {},
  components: {},
  events: {},
  data() {
    return {}
  },
  mounted() {
      this.initData();
  }
}
</script>
<style scoped>
.full_page{
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.left_panel {
    float: left;
    width: 30%;
    height: 100%;
    background-color: #04be02;
    color: #ffffff;
    display: table;
}

.vertical_middle {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.menu_list .weui_cell {
    padding-left: 0;
    padding-right: 0;
}

.menu_list .weui_cell:before {
    border-top: none;
}

.menu_list .menuitem {
    width: 100%;
}

.right_panel {
    float: left;
    width: 70%;
    height: 100%;
}

.title {
    width: 100%;
}
</style>
